<script setup>

import Geo from "../components/geo.vue";
import Pie from "../components/pie.vue";
import Bar from "../components/bar.vue";
import Line from "../components/line.vue";
import Radar from "../components/radar.vue";
</script>

<template>
  <dv-full-screen-container>
    <div class="title">
      123
    </div>
    <div class="container">
      <div class="column">
        <dv-border-box-1>
          <bar></bar>
        </dv-border-box-1>
        <dv-border-box-1>
          <pie></pie>
        </dv-border-box-1>
      </div>
      <div class="column geo">
        <dv-border-box-11 title="地区生产总值">
          <geo></geo>
        </dv-border-box-11>
      </div>
      <div class="column">
        <dv-border-box-1>
          <Line></Line>
        </dv-border-box-1>
        <dv-border-box-1>
          <radar></radar>
        </dv-border-box-1>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style scoped>
.title{
  height: 10vh;
  width: 100vw;
}
.container{
  display: flex;
  flex-direction: row;
  height: 90vh;
}
.column{
  flex: 1;
  height: 50%;
}
.geo{
  height: 100%;
}
</style>